<template>
  <header>
    <div class="logo">
      <img class="thro-logo" src="./assets/logo.png" />
    </div>
  </header>
  <section>
    <aside>
      <th-menus :data="data.menus" @link="onLink"></th-menus>
    </aside>
    <article>
      <router-view></router-view>
    </article>
  </section>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const data = reactive<Record<string, any>>({
  menus: [
    {
      name: "按钮",
      link: "/button",
      desc: "按钮组件",
    },
    {
      name: "链接",
      link: "/link",
      desc: "链接组件",
    },
    {
      name: "菜单",
      link: "/menu",
      desc: "菜单组件",
    },
    {
      name: "输入框",
      link: "/input",
      desc: "输入框组件",
    },
  ],
});

const router = useRouter();
function onLink(key: string) {
  console.log("路由跳转", key);
  router.push({ path: key });
}
</script>

<style lang="scss" scoped>
@import "./styles/common/var.scss";

header {
  width: 100vw;
  height: 100px;
  background-color: $color-primary;
}
.thro-logo {
  width: 98px;
  height: 98px;
}

section {
  display: flex;
  height: calc(100vh - 100px);
  aside {
    width: 240px;
    height: 100%;
    box-shadow: 0px 5px 5px 2px $color-info;
  }
  article {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
  }
}
</style>
